
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>电子杂志列表</title>
	<script src="__INDEX__/tem/js/mui.min.js"></script>
	<link href="__INDEX__/tem/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="__INDEX__/tem/css/style.css" />
	<link rel="stylesheet" href="__INDEX__/tem/css/iconfont.css" />
	<link rel="stylesheet" href="__INDEX__/tem/css/xn.css" />
	<script type="text/javascript" charset="utf-8">
		mui.init();
	</script>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title">电子杂志</h1>
	</header>
	
	<div class="mui-content">
		<div class="qbz_tabbox clearfix">
			<ul class="qbz_tab clearfix">
				{foreach name='cates' item='vo'}
				<li id="{$vo.id}" {if $vo.id == $cate_id1}class="active" {/if} class="qbz_tab1"> 
					<a href="javascript:void(0)">{$vo.name}</a>
				</li>
				{/foreach}
				{foreach name='catesno' item='vo'}
				<li>
					<a href="#" onclick="catesno()">{$vo.name}(未订)</a>
				</li>
				{/foreach}
			</ul>
			<div class="more"><span class="iconfont icon-jiahaocu"></span></div>
		</div>
		<div class="dzzz_conbox">
			<div class="bt"><img src="__INDEX__/tem/images/dzzz.jpg"></div>
			<ul class="dzzz_list clearfix xhgoods">
				{volist name="res" id="vo" empty="暂时没有数据"}
				<li>
					<a href="{:url('news/dy_show',['addtime'=>$vo.add_time,'cate_id1'=>$vo.cate_id1])}">
						<div class="dzzz_lisimg"><img src="__INDEX__/tem/images/fmbg.jpg"></div>
						<div class="dzzz_lisnam">第{$vo.add_time|strtotime|date="Ymd",###}期</div>
					</a>
				</li>
				{/volist}
			</ul>
		</div>
		
	</div>
<script type="text/javascript" src="__INDEX__/tem/dist/jquery.min.js"></script>
		<script src="__JS__/jquery.min.js"></script>
		<script src="__LIB__/layer.js"></script>
		<script src="__JS__/index.js"></script>

		<script type="text/javascript">
			function catesno(){
				layer.msg('未订阅,请到会员中心订阅');
			}
			var aniShow = "pop-in";
			//页面跳转
			mui('#footer-list').on('tap', 'a', function() {
				var id = this.getAttribute('href');
				var href = this.href;
				mui.openWindow({
					id: id,
					url: this.href,
					show: {
						aniShow: aniShow
					},
					waiting: {
						autoShow: false
					}
				});
			});
			$(function() {
				var page = 2;

				$(".qbz_tab1").on("click", function() {
					$(".xhgoods").html("");
					page = 1;

					do_ajax($(this).prop('id'));
				});

				//一开始显示数据
				//实际中应该是将分页的效果做成加载更多的效果 但是调取数据的原理 是一样的 就是显示数据的效果不一样
				$(document).scroll(function() {
					//滚动条滑动的时候获取滚动条距离顶部的距离
					var scroll = $(document).scrollTop();
					//屏幕的高度
					var client = $(window).height();
					var h = $(document).height();
					var flag = true;
					if(h <= scroll + client) { // 到达底部时,加载新内容
						if(flag == false) {
							return;
						}
						var cate = $(".active").prop("id");
						do_ajax(cate);
					}
				});

				function do_ajax(cate_id1) {
					$.ajax({
						url: "{:url('news/ajax_index')}",
						type: 'GET',
						data: {
							cate_id1: cate_id1,
							page: page
						},
						success: function(json) {
							page++;
							if(json.code == 1) {
								for(var i = 0; i < json.data.length; i++) {
									var att=json.data[i].add_time;
									var time1=att.replace("-","");
									var time1=time1.replace("-","");
									var str = '<li>' +
										'<a href="/index/news/dy_show/addtime/' + att + '/cate_id1/'+cate_id1+'.html">' +
											'<div class="dzzz_lisimg"><img src="__INDEX__/tem/images/fmbg.jpg"></div>' +
											'<div class="dzzz_lisnam">第' + time1 + '期</div>' +
										'</a>' +
									'</li>';
									$(".xhgoods").append(str);
								}
							} else {
								layer.msg(json.msg);
							}
						}
					});
				}

				$(".more").click(function() {
					if($(".qbz_tab").hasClass("show")) {
						$(".qbz_tab").removeClass("show");
					} else {
						$(".qbz_tab").addClass("show");
					}

				})
				$(".qbz_tab li a").click(function() {
					$(this).parent("li").addClass("active").siblings("li").removeClass("active");

				})

			})
			
			
		</script>
</body>
</html>